<template>
	<div class="appointment">
		<h2>预约</h2>
		<el-tabs activeName="activeName" v-model="activeName">
			<el-tab-pane label="预约视图" name="appointmentSee">
			</el-tab-pane>
			<el-tab-pane label="预约查询" name="appointSearch">
			</el-tab-pane>
			<el-tab-pane label="医生排班" name="doctorSchedule">
			</el-tab-pane>
		</el-tabs>
		<router-view></router-view>
	</div>
</template>
<style scoped lang="less">
	.box-container{
		padding:20px 40px 0 40px;
	}
</style>
<script>
	export default {
		name: "Appointment",
		data() {
			return {
				activeName: "appointmentSee"
			}
		},
		watch: {
			activeName: function(newValue) {
				switch (newValue) {
					case "appointmentSee":
						this.turnToPage("/appointmentSee");
						break;
					case "appointSearch":
						this.turnToPage({name:"AppointmentSearch"});
						break;			
					default:
						this.turnToPage("/doctorSchedule");
				}
			}
		},
		methods: {
			turnToPage(name) {
				this.$router.push(name)
			}
		}
	}
</script>
